<template>
    <!--要显示主体内容-->
    <div class="main">
      <div class="login">
        <div class="logo">
          <img src="../assets/logo.svg" alt="">
        </div>
        <el-form :model="user" class="user_form" :rules="userRules" ref="userFormRef">
          <el-form-item prop="name">
            <el-input v-model="user.name" placeholder="用户名" :prefix-icon="User"/>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input v-model="user.pwd" placeholder="密码" :prefix-icon="Lock" show-password/>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="submitForm(userFormRef)">登录</el-button>
            <el-button type="success" @click="resetForm(userFormRef)">重置密码</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script setup>
  import { reactive,ref } from 'vue'
  import { Lock, User } from '@element-plus/icons-vue'
  import api from '@/api/index.js'
  import { useRouter } from 'vue-router';

  // do not use same name with ref
  const user = reactive({
    name:'shenxin',
    pwd:''
  })

  // 定义表单规则
const userRules = reactive({
  name: [
     { required: true, message: '用户名不能为空', trigger: 'blur' },
     { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
   ],
  pwd: [
     { required: true,message: '密码不能为空', trigger: 'blur' },
   ]
})
// 创建路由对象
const router = useRouter()

// 定义表单ref
const userFormRef = ref(null)

// 定义重置表单的方法、
const resetForm = (formRef) => {
  formRef.resetFields()
}

// 定义登录功能
const submitForm = (formRef) => {
  formRef.validate((valid) => {
    if (valid) {
      console.log('验证通过，可以提交')
      api.login(user).then(res => {
        // 根据后台返回的数据，做出不同的处理
        if (res.data.status == 200) {
          // 登录成功
          ElMessage({
            message: res.data.msg,
            type: 'success',
          })
          // 记录登录的token值
          sessionStorage.setItem('token', res.data.data.token)
          // 跳转到主页
          router.push('/')
         }else{
          // 登录失败
          ElMessage.warning(res.data.msg)
         }
       })
     } else {
      console.log('验证失败')
      return false
     }
   })
}
  </script>
  
  <style scoped>
    .main {
      width: 100%;
      height: 1000px;
      background-color:rgb(192, 187, 168);
      display: flex;
      justify-content: center;
      align-items: center;
     }
    .login{
      width: 450px;
      height: 350px;
      background-color: white;
      border-radius: 5px;
     }
    .logo{
      width:200px;
      border: 1px solid #eee;
      margin: 0 auto;
      margin-top: -65px;
      padding: 5px;
      border-radius: 5px;
      box-shadow: 0 0 10px #ddd;
     }
    img{
      width: 100%;
      height: 100%;
     }
    .user_form{
      padding: 50px;
     }
    .btns{
      display: flex;
      justify-content: space-between;
     }
    .btns button{
      flex: 1;
     }
  </style>